<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统中心</el-breadcrumb-item>
      <el-breadcrumb-item>工序管理</el-breadcrumb-item>
      <el-breadcrumb-item>工序编辑</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>工序编辑</span>
        <el-button style="float: right; padding: 3px 0" icon="el-icon-close" circle @click="back"></el-button>
        <el-button style="float: right; padding: 3px 50px" type="text" @click="" el-icon-close @click="save">保存</el-button>
      </div>
      <el-form :model="process" :rules="processRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="工序编号" prop="code">
              <el-input v-model="process.code" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="工序名称" prop="name">
              <el-input v-model="process.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="收费方式" prop="ctype">
              <template>
                <el-select v-model="process.ctype" placeholder="请选择收费方式">
                  <el-option
                    key="0"
                    label="按时收费"
                    :value="0">
                  </el-option>
                  <el-option
                    key="1"
                    label="按件收费"
                    :value="1">
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="单价" prop="price" >
              <el-input v-model="process.price"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="准备工时单价" prop="prePrice">
              <el-input v-model="process.prePrice"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="描述" prop="remarks" >
              <div style="margin: 20px 0;"></div>
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="process.remarks"
                maxlength="30"
                show-word-limit
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'UpdateProess',
    data(){
      return{
        process:{
          id:'',
          name:'',
          code:'',
          ctype:'',
          price:'',
          prePrice:'',
          remarks:'',
        },
        options:[

        ],
        processRules:{
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入单价', trigger: 'blur' }
          ],
          prePrice: [
            { required: true, message: '请输入及时单价', trigger: 'blur' }
          ],
          remarks: [
            { required: true, message: '请输入描述', trigger: 'blur' }
          ],
          ctype: [
            { required: true, message: '请选择收费方式', trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
      back: function () {
        this.$router.push('/processList');
      },
      saveProcess:function (id) {
        this.$http.get('/process/get/'+id).then((res)=>{
          this.process=res.data.result
        })
      },
      save: function () {
        this.$refs['ruleForm'].validate((valid) => {
          if (!valid) {
            return
          }
          this.$http.post("/process/save", this.process).then((res) => {
              this.$message.success(res.data.message);
              this.$router.push('/processList')
            }
          )
        })
      },
    },
    mounted () {
      var id =this.$route.query.id;
      this.saveProcess(id);
    }
  }
</script>

<style scoped>

</style>
